.application-sidebar .active:hover,
.application-sidebar .active {
  @apply bg-primary-100 text-primary-500;
}

.content-area {
  /* remove the left padding. */
  .main-content-area {
    @apply lg:pl-0;
    transition: padding 0.1s ease;
  }

  &.sidebar-open {
    /* Add padding to the main area to allow for the sidebar to expand. */
    .main-content-area {
      @apply lg:pl-64;
      transition: padding 0.1s ease;
    }
  }
}

.sidebar-open {
  .avo-sidebar {
    transform: translateX(0);
    transition: transform 0.1s ease;
  }
}
.avo-sidebar {
  transform: translateX(-100%);
  transition: transform 0.1s ease;
}
